<template>
  <div>
    <!-- 编辑弹窗 -->
    <cvue-dialog
      :dialogVisible="dialogVisible"
      :title="title"
      :dialogLoading="dialogLoading"
      dialogWidth="500px"
      @handleOpen="getDetail"
      @closeDialog="closeDialog"
      @confirmDialog="confirmDialog"
      @handleClose="handleClose">
      <div class="dialog-body" slot="dialogBody">
        <cvue-table
          :option="tableOption"
          :data="tableData"
          ref="tbl"
          :isShowAdd="false"
          :page="page"
          :tablePage="tablePage"
          :pageSize="page.pageSize"
          :loading="tableLoading"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          @select-change="handleSelectChange"
          :isShowPage="false">
          <template slot-scope="scope" slot="courseState">
            {{ scope.row.courseState === 1 ? '上架' : '下架' }}
          </template>
        </cvue-table>
      </div>
    </cvue-dialog>
  </div>
</template>
<script>
import {mapGetters} from 'vuex'
import cvueDialog from '@/components/cvue-dialog'
import cvueTable from '@/components/cvue-table'
import { validPhone, validIp, validIdCN } from '@/util/validator.js'
export default {
  name: 'userEdit',
  components: {
    cvueDialog,
    cvueTable
  },
  data () {
    return {
      tablePage: 1,
      tableLoading: false,
      page: {
        total: 1, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10, // 每页显示多少条
        pageSizes: [10, 50, 100]
      },
      tableOption: {
        stripe: true,
        width: '100%',
        border: true,
        index: false,
        selected: true,
        cloumn: [
          { prop: 'index', label: '', align: 'center', width: 58 },
          { prop: 'courseName', label: '课程名称', align: 'center', sortable: true },
          { prop: 'courseState', label: '状态', align: 'center', sortable: true, slotStatus: true }
        ]
      },
      tableData: [
        // { name: 'ddd', code: 'sss', order: 1, status: 1 }
      ],
      disabled: false,
      dialogLoading: false,
      selectData: []
    }
  },
  mounted () {
    this.handleList()
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    title () {
      var title = ''
      if (this.$parent.actionType == 'add') {
        title = '新增'
      } else {
        title = '编辑'
      }
      return title
    },
    ...mapGetters(['token', 'userInfo', 'tenantId'])
  },
  methods: {
    // 改变pagesize
    handleSizeChange (val) {
      this.page.pageSize = val
      this.handleList(this.selectName)
    },
    // 改变页码
    handleCurrentChange (val) {
      this.tablePage = val
      this.handleList(this.selectName)
    },
    // 表格选择
    handleSelectChange (val) {
      this.selectData = val
    },
    // 列表接口
    handleList () {
      this.tableLoading = true
      var params = {
        current: 1,
        size: 1000,
        courseType: 1
        // orders: ['order', 'sort']
      }
      this.$store.dispatch('manage/CourseGetList', params).then(res => {
        console.log(res)
        if (res.code == '200') {
          var data = res.data.records
          this.tableData = data
          this.page.total = parseInt(res.data.total)
          this.page.currentPage = this.tablePage
          this.getEditDetail()
        }
        this.tableLoading = false
      }).catch(err => {
        console.log(err)
        this.tableLoading = false
      })
    },
    // 触发事件
    handleClose () {
      this.$emit('handleSecClose')
    },
    closeDialog () {
      this.$emit('closeSecDialog')
    },
    confirmDialog () {
      this.$parent.selectCourseData = this.selectData
      this.$emit('confirmSecDialog')
    },
    
    getDetail () {
    },
    getEditDetail () {
      var courseIds = []
      this.$parent.selectCourseData.forEach((item, index) => {
        courseIds.push(item.id)
      })
      this.$nextTick((item, index) => {
        this.tableData.forEach((item, index) => {
          if (courseIds.indexOf(item.id) >= 0) {
            this.$refs.tbl.$children[0].toggleRowSelection(item, true)
          }
        })
      })
    }
  }
}
</script>
<style scoped>
</style>
